<template>
	<!-- 其他element简单组件 -->
	<component
		v-if="column.form?.el"
		:is="`el-${column.form.el}`"
		v-bind="column.form.props"
		v-model="formParam[column.form.key ?? column.prop!]"
		:placeholder="placeholder(column)"
		:maxlength="column.form.props?.maxlength ?? (column.form.el === 'input' && column.form.props.type === 'textarea' ? 400 : 50)"
		:clearable="clearable(column)"
		:data="column.form.el === 'tree-select' ? columnEnum : []"
		range-separator="至"
		@change="changeForm"
		@focus="focusForm"
		start-placeholder="开始时间"
		end-placeholder="结束时间"
	>
		<template v-if="column.form?.inputSearch" #append>
			<div @click="column?.searchClick">
				<el-button type="info" :icon="Search" />
			</div>
		</template>
		<template v-if="column.form.el === 'select'">
			<component
				:is="`el-option`"
				v-for="(col, index) in columnEnum"
				:key="index"
				:label="col[fieldNames().label]"
				:value="col[fieldNames().value]"
			></component>
		</template>
		<template v-else-if="column.form.el === 'radio-group'">
			<component :is="`el-radio`" v-for="(col, index) in columnEnum" :key="index" :value="col[fieldNames().value]">{{
				col[fieldNames().label]
			}}</component>
		</template>
		<template v-else-if="column.form.el === 'checkbox-group'">
			<component
				:is="`el-checkbox`"
				v-for="(col, index) in columnEnum"
				:key="index"
				:label="col[fieldNames().label]"
				:value="col[fieldNames().value]"
			></component>
		</template>
		<!-- 表单下面的提示信息 -->
		<slot :name="`${column.prop}slot`"></slot>
	</component>

	<!-- 联动组件 -->
	<component
		v-if="column.form?.type === 'ZhyCascader'"
		:props="column.form?.props"
		:options="columnEnum"
		:formParam="formParam"
		:column="column"
		:changeForm="changeForm"
		:disabled="column.form.cascader?.disabled"
		v-bind="column.form.cascader"
		:is="ZhyCascader"
	></component>
	<!-- 上传文件 -->
	<component
		v-if="column.form?.type === 'ZhyUploadFile'"
		:formParam="formParam"
		:column="column"
		:changeForm="changeForm"
		v-bind="column.form?.props"
		:is="ZhyUploadFile"
	></component>
	<div v-if="column.form?.type === 'text'">
		{{ column.form?.value }}
	</div>
</template>

<script setup lang="ts" name="FormItem">
import { FromBoxProps } from '@/components/FormBox/interface';
import { Search } from '@element-plus/icons-vue';
import { computed, inject, ref } from 'vue';
import { ZhyCascader, ZhyUploadFile } from '@/components';
interface FormItem {
	column: FromBoxProps; // 具体每一个搜索项的配置
	formParam: { [key: string]: any }; // 提交参数
}

const props = defineProps<FormItem>();
// 接受 enumMap
const enumMap = inject('enumMap', ref(new Map()));

const columnEnum = computed(() => {
	if (!enumMap.value.get(props.column.prop)) return [];
	return enumMap.value.get(props.column.prop);
});

// 判断 fieldNames 设置 label && value 的 key 值
const fieldNames = () => {
	return {
		label: props.column.fieldNames?.label ?? 'label',
		value: props.column.fieldNames?.value ?? 'value'
	};
};
console.log(fieldNames());

// 判断 placeholder
const placeholder = (column: FromBoxProps) => {
	return (
		column.form?.props?.placeholder ?? (column.form?.el === 'input' || column.form?.el === 'input-number' ? '请输入' : '请选择')
	);
};

// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
const clearable = (column: FromBoxProps) => {
	return (
		column.form?.props?.clearable ??
		(column.form?.defaultValue == null || column.form?.defaultValue == undefined || column.form?.defaultValue == '')
	);
};

// 派发change事件
const emits = defineEmits(['changeForm', 'focusForm']);
const changeForm = (val?: any) => {
	emits('changeForm', val);
};
const focusForm = () => {
	emits('focusForm');
};
</script>
